<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json</title>
    <script src="../03jquery/js/jquery-3.6.0.js"></script>
    <script src="../03jquery/js/dream-msg.min.js"></script> <!-- 必须依赖jQuery -->
    <script>
        // 1.1.1 json对象定义
        let jsonObj = {
            "null": null,
            "str": "张三",
            "number": 111,
            "boolean": true,
            "array": ["李四", 222, true],
            "jsonObj": {
                "str": "王五",
                "number": 333,
                "boolean": false,
            }
        };

        $(function () {
            $("#definition").click(function () {
                Dreamer.info("typeof(jsonObj)==" + typeof (jsonObj), 10000);
                Dreamer.info("jsonObj==" + jsonObj.toString(), 10000);
            })
        });

        // 1.1.2 json对象访问
        $(function () {
            $("#access").click(function () {
                Dreamer.info("jsonObj.null==" + jsonObj.null, 10000);
                Dreamer.info("jsonObj.str==" + jsonObj.str, 10000);
                Dreamer.info("jsonObj.number==" + jsonObj.number, 10000);
                Dreamer.info("jsonObj.boolean==" + jsonObj.boolean, 10000);
                Dreamer.info("jsonObj.array==" + jsonObj.array, 10000);
                Dreamer.info("jsonObj.array[0]==" + jsonObj.array[0], 10000);
                Dreamer.info("jsonObj.jsonObj==" + jsonObj.jsonObj, 10000);
                Dreamer.info("jsonObj.jsonObj.str==" + jsonObj.jsonObj.str, 10000);
            })
        });

        // 1.1.3 json对象与json字符串互转
        $(function () {
            $("#convert").click(function () {
                Dreamer.info("jsonObj==" + jsonObj, 10000);
                Dreamer.info("typeof(jsonObj)==" + typeof (jsonObj), 10000);

                let jsonStr = JSON.stringify(jsonObj);
                Dreamer.info("jsonStr==" + jsonStr, 10000);
                Dreamer.info("typeof(jsonStr)==" + typeof (jsonStr), 10000);

                let jsonObj2 = JSON.parse(jsonStr);
                Dreamer.info("jsonObj2==" + jsonObj2, 10000);
                Dreamer.info("typeof(jsonObj2)==" + typeof (jsonObj2), 10000);
            })
        });
    </script>
</head>
<body>
<button id="definition">json对象定义</button>
<br>
<button id="access">json对象访问</button>
<br>
<button id="convert">json对象与json字符串互转</button>
<br>
</body>
</html>